.Button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  border-radius: 4px;
  height: 34px;
  min-width: 24px;
  background: linear-gradient(
    to bottom,
    var(--button-top-color) 0%,
    var(--button-bottom-color) 100%
  );
  border: 1px solid var(--button-border-color);
  border-top: 1px solid var(--button-border-top-color);
  color: var(--button-text-color);
  white-space: nowrap;
  padding: 0px 15px;
  box-sizing: border-box;
  font-weight: normal;
}

.Button--Transparent {
  background: transparent;
  border-color: transparent;
}

.Button--Small {
  font-size: 9px;
  padding: 6px;
  height: 22px;
}

.Button--Small svg {
  width: 16px;
}

.Button--Large {
  padding: 20px;
  min-width: 160px;
  height: 96px;
}

.Button--Transparent svg {
  fill: var(--button-light-icon-color);
}

.Button:hover {
  background-color: var(--toolbar-button-active-bottom-color);
}

.ButtonToolbar {
  display: flex;
  flex-direction: row;
}

.ButtonToolbar .Button ~ .Button {
  margin-left: 10px;
}

.Button:active {
  background: linear-gradient(
    to bottom,
    var(--toolbar-button-active-top-color) 0%,
    var(--toolbar-button-active-bottom-color) 100%
  );
}

.Button--Transparent:hover {
  background: rgba(128, 128, 128, 0.3);
}

.Button--Transparent:active {
  background: rgba(128, 128, 128, 0.4);
}

.ButtonToolbar__Spacer {
  flex: 1;
}

.DropdownButton {
  position: relative;
}

.DropdownButton > .Button .DropdownButton__Triangle > svg {
  transform: rotate(180deg);
  width: 8px;
  height: 8px;
}

.Platform__win32 .Button {
  box-shadow: none;
  border-radius: 2px;
  background: var(--toolbar-button-top-color);
  border-color: var(--toolbar-bottom-color);
}

.Platform__win32 .Button:hover {
}

.Platform__win32 .Button--Transparent {
  background: transparent;
  border-color: transparent;
}
